import array from './src/js/moca'
import { init, h } from 'snabbdom'
import Class from 'snabbdom/modules/class'
import Style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
let _array = array
const patch = init([
  Class,
  Style,
  eventlisteners
])
const app = document.getElementById('app')
const styles = {
  'box-shadow': '0 0 1px rgba(0, 0, 0, .2), inset 0 0 4px rgba(0, 0, 0, .1)',
  display: 'inline-block',
  cursor: 'pointer',
  background: '#fff',
  padding: '.5em .8em',
  '-webkit-transition': 'box-shadow .05s ease-in-out'
}
const itemStyle = {
  overflow: 'hidden',
  position: 'relative',
  'box-sizing': 'border-box',
  width: '627px',
  left: '0px',
  margin: '.5em 0',
  padding: '1em',
  background: '#fff',
  'box-shadow': '0 0 1px rgba(0, 0, 0, .2)',
  display: 'flex',
  'align-items': 'center',
  'margin-left': '8px'
}
function getVnode() { 
  let newVnode = h('div#app', {
    style: { width: '627px' }
  }, [
    h('h3', {
      class: { active: true },
    }, `Top ${_array.length} movies`),
    h('div', { style: { width: '100%', display: 'flex', 'justify-content': 'space-between' } }, [
      h('div', [
        h('span', {
          style: styles
        }, 'Sort by'),
        h('span', {
          style: styles,
          on: {
            click: () => { 
              _array = _array.sort((a, b) => a.rank - b.rank)
              updateNode()
            }
          }
        }, 'Rank'),
        h('span', {
          style: styles,
          on: {
            click: () => { 
              _array = _array.sort((a, b) => a.title.localeCompare(b.title))
              updateNode()
            }
          }
        }, 'Title'),
        h('span', {
          style: styles,
          on: {
            click: () => { 
              _array = _array.sort((a, b) => a.Description.localeCompare(b.Description))
              updateNode()
            }
          }
        }, 'Description'),
      ]),
      h('span', {
        style: styles,
        on: {
          click: () => { 
            _array.unshift({
              rank: _array.length + 1,
                title: 'The Shawshank Redemption',
                Description: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.'
            })
            updateNode()
          }
        }
      }, 'Add')
    ]),
    h('div', {
    }, getList())
  ])
  return newVnode
}
const newVnode = getVnode()
let oldVnode = patch(app, newVnode)

function updateNode() { 
  const newVnode = getVnode()
  oldVnode = patch(oldVnode, newVnode)
}

function getList (){ 
  return _array.map((item, index) => { 
    return h('div', {
      style: itemStyle
    }, [
      h('div', {
        style: {
          cursor: 'pointer',
          position: 'absolute',
          top: '0',
          right: '0',
          color: '#C25151',
          width: '1.4em',
          height: '1.4em',
          'text-align': 'center',
          'line-height': '1.4em',
          padding: '0',
          opacity: '1',
          // transform: `translateY(${8 + 124 * index}px)`,
          remove: { 
            opacity: '0'
          }
        },
        on: {
          click: () => { 
            _array.splice(index, 1)
            updateNode()
          }
        }
      }, 'x'),
      h('span', { style: { width: '5%' } }, item.rank),
        h('span', {
          style: {
            width: '30%'
          }
        }, item.title),
      h('span', { style: { width: '65%' } }, item.Description)
    ])
  })
}